<template>
    <div>
        <h3>商品列表浏览</h3>
        <el-table :data="tableData" stripe style="width: 100%" @row-click="goToDetail">
            <el-table-column prop="title" label="商品名" />
            <el-table-column  label="商品图片" >
                <template v-slot="scope">
                    <el-image :src="scope.row.imgUrl" style="width: 100px; height: 100px"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="商品描述" />
            <el-table-column prop="price" label="商品价格" />
            <el-table-column prop="stock" label="商品库存" />
            <el-table-column prop="sales" label="商品销量" />
        </el-table>
    </div>
</template>

<script>

export default {
    data() {
        return {
            tableData: [],
            
        }
    },
    mounted: function() {
        this.$http({
                method: 'GET',
                url:this.$backend + "/item/list",  
                withCredentials: true,
            })
            .then((result) => {
                if (result.data.status == "success") {
                    this.tableData = result.data.data
                    //console.log(this.tableData)
                } else {
                    console.log(result);
                    alert("获取商品列表失败,"+ result.data.data.errMsg);
                }
            }).catch((err) => {
                console.log(err)
                alert("获取商品列表超时, 请稍后再试");
                return false;
            });
    },
    methods: {
        goToDetail(row){
            this.$router.push('/source/item/get/'+row.id)
        },
    },
}

</script>
